<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="item in tabsData" :label="item.label" :name="item.name"  :key="item.name">
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input
            placeholder="手机号/用户名"
            clearable
            prefix-icon="el-icon-search"
            v-model="queryForm.query_value">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_getContentList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        ref="multipleTable"
        style="width: 100%">
        <el-table-column
          type="index"
          width="55">
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="用户"
        >
        </el-table-column>
        <el-table-column
          prop="mobilenum"
          label="手机号"
            width="150"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          :formatter="sexFmt"
          label="性别"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button v-if="!(scope.row.status === 9 || scope.row.hmd === 1)" type="text" @click="getDetail(scope.row)"><i class="iconfont icon-1202youjiantou"></i>详情</el-button>
            <el-button v-if="!(scope.row.status === 9 || scope.row.hmd === 1)" type="text" @click="confirm('ban', scope.row)"><i class="iconfont icon-guanbi"></i>禁止</el-button>
            <el-button v-if="!(scope.row.status === 9 || scope.row.hmd === 1)" type="text" @click="confirm('hmd', scope.row)"><i class="iconfont icon-del"></i>黑名单</el-button>
            <el-button v-if="scope.row.status === 9 || scope.row.hmd === 1" type="text" @click="confirm('cancel', scope.row)"><i class="iconfont icon-quxiao"></i>取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        @current-change="_getContentList"
        :current-page.sync="page.curpage"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 用户详情 -->
    <el-dialog title="用户详情" :visible.sync="fullShow">
      <el-form :model="detailObj">
        <el-form-item label="用户手机号：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.mobilenum}}</span>
        </el-form-item>
        <el-form-item label="用户名：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.user_name}}</span>
        </el-form-item>
        <el-form-item label="用户头像：" :label-width="formLabelWidth">
          <img class="avter" :src="imgUrl + detailObj.user_head_img" alt="">
        </el-form-item>
        <el-form-item label="性别：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.sex === 1 ? '男' : '女'}}</span>
        </el-form-item>
        <el-form-item label="地址：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.address}}</span>
        </el-form-item>
        <el-form-item label="发布：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.infoCount}}个</span>
          <el-button type="text" @click="golook('info')">查看</el-button>
        </el-form-item>
        <el-form-item label="动态：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.dynamicCount}}</span>
          <el-button type="text" @click="golook('dongtai')">查看</el-button>
        </el-form-item>
        <el-form-item label="回复：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.commentCount}}</span>
          <el-button type="text" @click="golook('comment')">查看</el-button>
        </el-form-item>
        <!-- <el-form-item label="QQ：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.mobilenum}}</span>
        </el-form-item>
        <el-form-item label="微信：" :label-width="formLabelWidth">
          <span class="right-val">{{detailObj.mobilenum}}</span>
        </el-form-item> -->
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {getUserList, updateHMD, updateUserStatus, getDetailUserInfo} from 'api/usersManagementAPI'
import config from 'api/config'
export default {
  data() {
    return {
      tabsData: [
        {name: 'all', label: '用户'},
        {name: '9', label: '禁止'},
        {name: '1', label: '黑名单'}
      ],
      imgUrl: config.imgUrl,
      formLabelWidth: '120px',
      fullShow: false,
      activeName: 'all',
      options: [],
      queryForm: {},
      
      detailObj: {},

      mainList: [],

      page: {
          curpage: 1,
          total: 1
      }
      
    }
  },
  methods: {
    handleSelectionChange(rows){
      this.delArr = rows.map(row => {
        return {info_id: row.info_id, category_id: row.category_id}
      })
    },
    // 黑名单状态
    _updateHMD(row) {
      let hmd = row.hmd === 1 ? 0 : 1
      updateHMD({user_id: row.user_id, hmd}).then(res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    // 用户状态
    _updateUserStatus(row) {
      let status = row.status === 2 ? 9 : 2
      updateUserStatus({user_id: row.user_id, status}).then(res => {
        if(res) {
          this._caozuoAfter(res)
        }
      })
    },
    golook(type) {
      let url
      if(type === 'info') {
        url = '/home/contentManagement'
      }else if(type === 'dongtai') {
        url = '/home/dynamicManagement'
      }else{
        url = '/home/commentManagement'
      }
      url += '/' + this.detailObj.user_name
      this.$router.push(url)
    },
    confirm(type, row) {
      this.$confirm('是否确认进行此操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(type==='cancel') {
          if(row.hmd === 1) {
            this._updateHMD(row)
          }else{
            this._updateUserStatus(row)
          }
        }else if(type === 'hmd') {
          this._updateHMD(row)
        }else if(type === 'ban') {
          this._updateUserStatus(row)
        }
      })
    },
    _caozuoAfter(res){
      this.$message({
        message: res.rMsg,
        type: 'success'
      })
      this.page.curpage = 1
      this._getContentList()
    },
    getDetail(row){
      let user_id = row.user_id
      this.fullShow = true
      getDetailUserInfo({user_id}).then(res => {
        this.detailObj = res.rData[0]
      })
    },
    sexFmt(row, column, cellValue){
      let obj = {
        '1': '男',
        '2': '女'
      }
      return obj[cellValue]
    },
    // 获取
    _getContentList(){
      let data = JSON.parse(JSON.stringify(this.queryForm))
      if(this.activeName==='9'){
        data.status = this.activeName
      }else if(this.activeName==='1'){
        data.hmd = this.activeName
      }else{
        data.hmd = 0
        data.status = 2
      }
      getUserList(this.page.curpage, data).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    }
  },
  watch: {
    activeName: {
      handler(){
        this.page.curpage = 1
        this._getContentList()
      },
      immediate: true
    }
  },
  created(){

  }
}
</script>

<style lang="scss" scoped>
.avter{
  height: 55px;
  width: 55px;
  border-radius: 50%;
}
.right-val{
  color: #000;
  margin-right: 10px;
}
</style>
